import React from 'react';
import {
    Modal,
    Table, Input, Button
} from 'antd';
import { connect } from 'umi';
import request from '@/utils/request';

const { Search } = Input;
class ItemSelect extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            visible: false,
            loading: false,
            pageIndex: 1,
            pageSize: 10,
            dataSource: [],
        }
    }
    componentDidMount() {

    }
    fetchDatas = () => {
        const { pageIndex, keywords, pageSize } = this.state;
        this.setState({ loading: true });
        let apiURL = '/api/services/app/' + this.props.control + '/' + this.props.act;
        request(apiURL, {
            method: 'GET',
            params: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, keywords, }
        }).then((response) => {
            var resp = response.result;
            if (resp) {
                this.setState({
                    dataSource: resp.items,
                    totalCount: resp.totalCount,
                    loading: false
                });
            }
        });
    }
    setCurrent = (obj?: any) => {
        if (this.props.setCurrent) {
            this.props.setCurrent(obj);
        }
        this.switchModal()
    }
    onSearch = (keywords: string) => {
        let _this = this;
        this.setState({ keywords }, function () {
            _this.fetchDatas()
        })
    };
    switchModal = () => {
        const { visible } = this.state;
        if (!visible) {
            this.fetchDatas();
        }
        this.setState({ visible: !visible })
    }
    render() {
        const { loading, dataSource, totalCount, pageSize, visible } = this.state;

        return (
            <>
                <Button
                    type={this.props.btntype}
                    danger={this.props.danger}
                    icon={this.props.icon}
                    disabled={this.props.disabled}
                    onClick={this.switchModal}>{this.props.text}</Button>
                <Modal
                    width={this.props.width}
                    title={this.props.title}
                    visible={visible}
                    destroyOnClose={true}
                    onCancel={this.switchModal}
                    footer={false}
                >
                    <Table
                        title={() => <Search
                            placeholder="关键词搜索"
                            allowClear
                            enterButton
                            onSearch={this.onSearch}
                        />}
                        onRow={record => {
                            return {
                                onClick: () => { },
                                onDoubleClick: () => { this.setCurrent(record) },
                            };
                        }}
                        pagination={{
                            onChange: page => {
                                this.setState({ pageIndex: page }, () => {
                                    this.fetchDatas();
                                });
                            },
                            pageSize,
                            total: totalCount,
                        }}
                        rowKey="id" size="small" columns={this.props.columns} dataSource={dataSource} loading={loading} />
                </Modal>

            </>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
}))(ItemSelect);